<template>
  <!-- 我的 路由组件 -->
  <div class="music-mine">
    <!-- 判断是否登录 -->
    <template v-if="isLogin">
      <MineHeader></MineHeader>
      <MineBar></MineBar>
      <div class="iframe">
        <IframeNav></IframeNav>
        <MineIframe></MineIframe>
      </div>
      <MineOperation></MineOperation>
    </template>
    <!-- 未登录空状态 -->
    <el-empty description="暂未登录" image="" v-else :image-size="width">
      <router-link to="/login" class="vip" style="font-size: 0.5rem"
        >立即登录</router-link
      ></el-empty
    >
  </div>
</template>

<script>
import IframeNav from "@/components/mine/IframeNav";
import MineIframe from "@/components/mine/MineIframe";
import MineHeader from "@/components/mine/MineHeader.vue";
import MineBar from "@/components/mine/MineBar.vue";
import MineOperation from "@/components/mine/MineOperation";
import { mapState, mapGetters } from "vuex";
export default {
  name: "MusicMine",
  components: {
    MineHeader,
    MineBar,
    MineOperation,
    IframeNav,
    MineIframe,
  },
  computed: {
    /* 计算是否登录 */
    ...mapGetters("user", ["isLogin"]),
    /* 获取视口宽度 */
    ...mapState("music", ["screenWidth"]),
    /* 计算空状态图片宽度 */
    width() {
      return this.screenWidth < 678 ? 200 : 350;
    },
  },
};
</script>

<style lang="less" scoped>
.music-mine {
  height: 100vh;
  position: relative;
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
  background: #333333;
  padding: 0.5rem 0;
  .iframe {
    display: flex;
    margin: 0 1rem;
    margin-top: 1rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
  }
}
</style>